<!--指标对比饼图-->

<template>
  <div class="w-h-full">
    <div v-if="shade" class="shade"></div>
    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'ContrastPieChart',
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.2',
      configDataTemp: Object.assign({

        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          series: {
            radius: '80%',
            center: ['50%', '50%'],
            label: {
              normal: {
                show: true,
                position: 'inside',
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              },
            },
          }
        },

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '指标'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            'name': '男',
            'value': 49
          },
          {
            'name': '女',
            'value': 23
          }
        ],
        ds_useFilter: true,
        ds_useTimer: true,
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemClick', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('name', '', '指标'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '值')
        ])
      ]))
    },
    data() {
      return {}
    },
    mounted() {

      this.init();

      this.setTimer(() => {
        this.init()
      })
    },
    methods: {

      init() {
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        });
      },

      launchInteractionStream (params) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClick', params.data)
      }
    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          tooltip: {
            trigger: 'item',
            formatter: "{b}：{c}（{d}%）"
          },
          series: [{
            name: '',
            type: 'pie',
            radius: this.component.compConfigData.chartOption.series.radius,
            selectedMode: false,
            selectedOffset: 10,
            clockwise: true,
            center: this.component.compConfigData.chartOption.series.center,
            data: [],
            roseType: 'radius',
            label: {
              normal: {
                show: this.component.compConfigData.chartOption.series.label.normal.show,
                position: this.component.compConfigData.chartOption.series.label.normal.position,
                // formatter: function (e) {
                //   return 'e.name + '(' + e.value + ')''
                // }
                // formatter: ['{c|{b}{d}%}', '{b|{b}}'].join('\n'),
                formatter: ['{b|{d}%}'].join('\n'),
                rich: {
                  b: {
                    color: this.component.compConfigData.chartOption.series.label.normal.textStyle.color,
                    fontSize: this.component.compConfigData.chartOption.series.label.normal.textStyle.fontSize
                  }
                }
              }
            }
          }]
        };

        let newResultObj = this.$PnUtil.deepClone(this.runCustomFilter(this.component.compConfigData.ds_resultObj));
        option.series[0].data = newResultObj.sort(function (a, b) {
          return a.value - b.value
        });


        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    },
    watch: {}
  };

  export default _this
</script>

<style scoped>

</style>
